<include file="public@header"/>
</head>
<body>
<div class="wrap">
    <ul class="nav nav-tabs">
        <li class="active"><a>编辑</a></li>
    </ul>
    <form method="post" class="form-horizontal js-ajax-form margin-top-20" action="{:url('dostaff')}">



        <div class="form-group">
            <label for="js-smtpsecure" class="col-sm-2 control-label">
                <span class="form-required">*</span>姓名
            </label>
            <div class="col-md-6 col-sm-10">
                <input type="text" class="form-control" name="name" value="{$res['name']}">
            </div>
        </div>

        <div class="form-group">

            <label for="js-smtpsecure" class="col-sm-2 control-label">
                <span class="form-required">*</span>联系方式
            </label>
            <div class="col-md-6 col-sm-10">
                <input type="number" class="form-control" name="mobile" value="{$res['mobile']}">
            </div>
        </div>

        <div class="form-group">

            <label for="js-smtpsecure" class="col-sm-2 control-label">
                <span class="form-required">*</span>入职时间
            </label>
            <div class="col-md-6 col-sm-10">
                <input type="date" class="form-control" name="incTime" value="{$res['incTime']}">
            </div>
        </div>


        <div class="form-group">
            <label for="js-smtpsecure" class="col-sm-2 control-label">
                <span class="form-required">*</span>离职时间
            </label>
            <div class="col-md-6 col-sm-10">
                <input type="date" class="form-control" name="outTime" value="{$res['outTime']}">
            </div>
        </div>

        <input type="hidden" name="id" value="{$res['id']}">

        <div class="form-group">
            <label for="js-smtpsecure" class="col-sm-2 control-label">
                身份证正/反面
            </label>
            <div class="col-md-6 col-sm-10">
                <input type="file" id="idCardUpload" name="image[]" class="form-control" multiple accept="image/*" />
                <div id="idCardPreviewContainer" class="image-preview-container" style="margin-top: 10px; display: flex; flex-wrap: wrap;">
                    <foreach name="res['imgs']" item="v">
                        <?php if($v != 'http://'.$_SERVER['SERVER_NAME']){ ?>
                        <div class="image-preview-item">
                            <img src="{$v}" alt="" onclick="ImageUploader.showImageModal('{$v}')">
                            <button type="button" class="delete-btn" onclick="removeImage(this, '{$v}', 'image')" title="删除">×</button>
                            <input type="hidden" name="old_image[]" value="{$v}">
                        </div>
                        <?php }?>
                    </foreach>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary js-ajax-submit">{:lang('SAVE')}</button>
                <a class="btn btn-default" href="javascript:history.back(-1);">{:lang('BACK')}</a>
            </div>
        </div>
    </form>
</div>
<script src="__STATIC__/js/admin.js"></script>
<script src="__STATIC__/js/image-uploader.js"></script>
<script>
    // 页面加载完成后初始化所有功能
    document.addEventListener('DOMContentLoaded', function() {
        // 初始化身份证图片上传组件
        const idCardUploader = new ImageUploader({
            inputId: 'idCardUpload',
            previewContainerId: 'idCardPreviewContainer',
            fieldName: 'image',
            useDataTransfer: true
        });
    });
    
    // 删除已有图片
    function removeImage(btn, imgSrc, fieldName) {
        if (confirm('确定要删除这张图片吗？')) {
            // 移除图片元素
            const imgItem = btn.parentNode;
            imgItem.parentNode.removeChild(imgItem);
            
            // 创建一个隐藏的输入字段，用于告诉后端删除这个图片
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = `remove_${fieldName}[]`;
            input.value = imgSrc;
            document.querySelector('form').appendChild(input);
        }
    }
</script>
</body>
</html>
